<template>
        <el-row style="width: 100%;min-width: 1024px;" :gutter="4" ref="allBox">
            <div class="searchTag">
                <span @click="clickTag(tag)" v-for="tag in tags">
                    <el-tag
                            :key="tag.name"
                            closable
                            :disable-transitions="true"
                            @close="closeSearchTag(tag)"
                            size="medium"
                            :type="tag.type"
                            class="keywordsTag"
                            style="margin-right: 15px;">
                        {{tag.name}}
                    </el-tag>
                </span>
            </div>
            <el-col :span="3"  ref="materielTypeBox" class="left-sider" style="overflow: auto;">
                    <div style="margin-left: 20px;">
                        <el-tree :data="typeAllDate" :props="defaultProps" node-key="id" empty-text="没有数据"
                                 :expand-on-click-node="false"
                                 :default-expanded-keys="defaultExpandedKeys"
                                 @node-drag-start="handleTypeDragStart"
                                 @node-drag-enter="handleTypeDragEnter"
                                 @node-drag-leave="handleTypeDragLeave"
                                 @node-drag-over="handleTypeDragOver"
                                 @node-drag-end="handleTypeDragEnd"
                                 @node-drop="handleTypeDrop"
                                 draggable
                                 :allow-drop="allowTypeDrop"
                                 :allow-drag="allowTypeDrag">
                            <span class="custom-tree-node" slot-scope="{ node, data }" style="height: 100%;line-height: 100%;width: 100%;">
                                <span @click.stop="nodeClick(node.data)" style="padding: 7px 0;">{{ node.label }}</span>
                              </span>
                        </el-tree>
                    </div>
            </el-col>
            <el-col :span="21"  ref="materielBox" class="right-content">
                <el-col ref="splitLine" class="split-line"></el-col>
                <div class="operatBtnWrapper" style="height: 30px;padding: 10px 0 10px 8px;">
                    <el-button class="operatBtnBig" @click.stop="routerToSuppliers">供应商列表</el-button>
                    <el-button class="operatBtnBig" @click="handleRelationSupplier" type="text" size="small">关联供应商</el-button>
                    <el-button class="operatBtnBig" @click="handleShowSupplier" type="text" size="small">查看供应商</el-button>
                    <a class="operatBtnMiddle" :href="outExcelUrl">导出</a>
                    <div style="min-width:400px;height: 30px;display: inline-block;">
                        <el-form :inline="true" :model="search" size="small" style="height: 30px;line-height: 30px;">
                            <el-form-item label="关键字:">
                                <el-input v-model.trim="keywords" placeholder="编号 名称 规格 品牌 备注" style="margin-top: 1px;width: 180px;"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <e-button class="operatBtnMiddle" @click="searchMateriel">查询</e-button>
                                <e-button class="operatBtnMiddle" @click="getMateriel()">刷新</e-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div style="width: 98%;margin: 0 0 0 8px;">
                    <el-table
                            :data="materielData"
                            @sort-change="handleSortChange"
                            border
                            @selection-change="selectionChange"
                            @filter-change="filterChange"
                            :height="tableHeight"
                            size="mini"
                            ref="materielTable"
                            :header-cell-style="headRowStyle"
                            :row-style="rowClass"
                            @row-click="rowClick"
                            class="materielTable"
                            style="width: 100%;">
                        <el-table-column
                                type="selection"
                                width="35">
                        </el-table-column>
                        <!--<el-table-column
                                v-for="(item,index) in fieldList" :key="index"
                                v-if="item.field_name != 'images' && item.field_name != 'files' && item.is_show == 1"
                                :prop="item.field_name"
                                :sortable="item.can_sort"
                                :label="item.show_name"
                                show-overflow-tooltip="true"
                                fit
                                align="center">
                            <template slot-scope="scope">
                                <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                            </template>
                        </el-table-column>-->
                        <el-table-column
                                v-for="(item,index) in fieldList" :key="index"
                                v-if="item.field_name != 'images' && item.field_name != 'files' && item.field_name != 'materiel_state' && item.is_show == 1"
                                :prop="item.field_name"
                                :sortable="item.can_sort"
                                :label="item.show_name"
                                show-overflow-tooltip="true"
                                fit
                                align="center">
                            <template slot-scope="scope">
                                <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                v-else-if="item.field_name == 'materiel_state' && item.is_show == 1"
                                :prop="item.field_name"
                                :sortable="item.can_sort"
                                :label="item.show_name"
                                show-overflow-tooltip="true"
                                fit
                                :filters="stateOptions"
                                column-key="state"
                                :filter-method="filterStateHandler"
                                align="center">
                            <template slot-scope="scope">
                                <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                v-else-if="item.field_name == 'images' && item.is_show == 1"
                                :prop="item.field_name"
                                :sortable="item.sort_able"
                                :label="item.show_name"
                                show-overflow-tooltip="true"
                                fit
                                align="center">
                            <template slot-scope="scope" style="padding: 0;">
                                <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.images[0]">
                                    <div class="block" style="height: 330px;width: 350px;">
                                        <el-carousel style="height: 330px;width: 350px;" indicator-position="outside" autoplay="false">
                                            <el-carousel-item v-for="item in getImages(scope.row.images)" :key="item" align="center">
                                                <img :src="item" alt="" style="height: 300px;">
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                    <div slot="reference" class="images-wrapper" style="height: 23px;">
                                        <span>
                                            <img :src="(scope.row.images)[0].image_url" alt="" style="width: 23px;height: 23px;">
                                        </span>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column
                                v-else-if="item.field_name == 'files' && item.is_show == 1"
                                :prop="item.field_name"
                                :sortable="item.sort_able"
                                :label="item.show_name"
                                show-overflow-tooltip="true"
                                fit
                                align="center">
                            <template slot-scope="scope" style="padding: 0;">
                                <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.files[0]">
                                    <div class="block">
                                        <p v-for="item in getFiles(scope.row.files)" :key="item" style="font-size: 12px;margin-bottom: 3px;">
                                            <a :href="item.url" style="color: black">{{item.name}}</a>
                                        </p>
                                    </div>
                                    <div slot="reference" class="images-wrapper">
                                        <span>
                                            <h3>资料</h3>
                                        </span>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="选择供应商" :visible.sync="supplierVisible" width="500px" v-dialogDrag close-on-press-escape="false" close-on-click-modal="false" @close="closeRelation">
                        <el-form :inline="true" :model="relationSupplier" :rules="relationSupplierRule" size="small" style="height: 30px;line-height: 30px;margin-bottom: 5px;">
                            <el-form-item label="供应商名称:" prop="id">
                                <el-select v-model="relationSupplier.id" clearable filterable placeholder="请选择供应商" style="width: 350px;">
                                    <el-option
                                            v-for="item in useSupplierList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="closeRelation">取 消</el-button>
                            <el-button type="primary" @click="submitRelationSupplier">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-dialog title="已关联的供应商" :visible.syne="relationSupplierVisible" v-dialogDrag width="80%" @close="relationSupplierVisible = false">
                        <el-table
                                :data="relationMaterielSupplier"
                                border
                                size="mini"
                                :header-cell-style="headRowStyle"
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <div v-if="props.row.supplier_user.length > 0">
                                        <span style="display: inline-block;font-size: 13px;">联系人</span>
                                        <el-table :data="props.row.supplier_user" style="width: 100%" size="mini" border :header-cell-style="innerHeadRowStyle" class="supplierMinTableClass">
                                            <el-table-column
                                                    prop="name"
                                                    label="姓名"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="job"
                                                    label="职务"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="phone"
                                                    label="手机"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="qq"
                                                    label="QQ"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="wechat"
                                                    label="微信"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="email"
                                                    label="邮箱"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="user_state"
                                                    label="状态"
                                                    align="center">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div v-if="props.row.former_company.length > 0">
                                        <span style="display: inline-block;font-size: 13px;">公司前身</span>
                                        <el-table :data="props.row.former_company" style="width: 100%" size="mini" border :header-cell-style="innerHeadRowStyle" class="supplierMinTableClass">
                                            <el-table-column
                                                    prop="area"
                                                    label="区域"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="55">
                                                <template slot-scope="scope">
                                                    <span v-html="getRenderValueSupplier(scope.row,'area')"></span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="name"
                                                    label="名称"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="nature"
                                                    label="性质"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="55">
                                                <template slot-scope="scope">
                                                    <span v-html="getRenderValueSupplier(scope.row,'nature')"></span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="address"
                                                    label="地址"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="180">
                                                <template slot-scope="scope">
                                                    <span v-html="getRenderValueSupplier(scope.row,'address')"></span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="mobile"
                                                    label="电话"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="website"
                                                    label="公司网站"
                                                    show-overflow-tooltip="true"
                                                    align="center"
                                                    width="100">
                                                <template slot-scope="scope">
                                                    <a :href="'http://'+scope.row.website"
                                                       target="_blank"
                                                       class="buttonText">{{scope.row.website}}</a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="bank"
                                                    label="开户银行"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="account"
                                                    label="账号"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="tax_number"
                                                    label="税号"
                                                    align="center"
                                                    show-overflow-tooltip="true"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="supplier_level"
                                                    label="供应商等级"
                                                    align="center"
                                                    show-overflow-tooltip="true">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="company_state"
                                                    label="公司状态"
                                                    align="center"
                                                    width="75">
                                                <template slot-scope="scope">
                                                    <span v-html="getRenderValueSupplier(scope.row,'company_state')"></span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="state"
                                                    label="启用"
                                                    align="center"
                                                    width="55">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="area"
                                    label="区域"
                                    sortable
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="50">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValueSupplier(scope.row,'area')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    sortable
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="nature"
                                    label="性质"
                                    sortable
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="50">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValueSupplier(scope.row,'nature')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="地址"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="180">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValueSupplier(scope.row,'address')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="mobile"
                                    label="电话"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="website"
                                    label="公司网站"
                                    show-overflow-tooltip="true"
                                    align="center"
                                    width="100">
                                <template slot-scope="scope">
                                    <a :href="'http://'+scope.row.website"
                                       target="_blank"
                                       class="buttonText">{{scope.row.website}}</a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="bank"
                                    label="开户银行"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="140">
                            </el-table-column>
                            <el-table-column
                                    prop="account"
                                    label="账号"
                                    align="center"
                                    show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column
                                    prop="tax_number"
                                    label="税号"
                                    align="center"
                                    show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column
                                    prop="supplier_level"
                                    label="供应商等级"
                                    align="center"
                                    show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column
                                    prop="company_state"
                                    label="公司状态"
                                    sortable
                                    align="center"
                                    width="75">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValueSupplier(scope.row,'company_state')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="default"
                                    label="关联状态"
                                    sortable
                                    align="center"
                                    width="80">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValueSupplier(scope.row,'default')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="启用"
                                    sortable
                                    align="center"
                                    width="50">
                            </el-table-column>
                            <el-table-column align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="mini" @click="cancelRelation(scope.$index, scope.row)" title="取消关联" style="border:none;margin: 0 8px;">
                                        <icon name="closeCol" class="scaleIcon1" title="取消关联" @click.native.stop="cancelRelation(scope.$index, scope.row)"></icon>
                                    </el-button>
                                    <!--<el-button v-if="scope.row.default == 1" type="text" size="mini" @click="disableRelationUse(scope.$index, scope.row)" title="禁用此关联" style="border:none;margin: 0 8px;">
                                        <icon name="showDisabled" class="scaleIcon1" title="禁用此关联" @click.native.stop="disableRelationUse(scope.$index, scope.row)"></icon>
                                    </el-button>
                                    <el-button v-else type="text" size="mini" @click="enableRelationUse(scope.$index, scope.row)" title="启用此关联" style="border:none;margin: 0 8px;">
                                        <icon name="show" class="scaleIcon1" title="启用此关联" @click.native.stop="enableRelationUse(scope.$index, scope.row)"></icon>
                                    </el-button>-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="relationSupplierVisible = false">关 闭</el-button>
                        </span>
                    </el-dialog>
                </div>
                <e-col :span="21" class="pageWrapper" ref="pageDiv">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalMateriel"
                            :current-page="currentPage"
                            style="padding-top: 6px;padding-left: 20px;height: 40px;">
                    </el-pagination>
                </e-col>
            </el-col>
        </el-row>
</template>

<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    // import { getPageData} from "@/assets/js/common.js"
    import { mapGetters } from 'vuex'
    import { ADDRLIST } from "@/assets/js/data.js"
    import {countryList} from "../../../assets/js/data";
    import { Carousel,CarouselItem } from 'element-ui';
    Vue.use(Carousel);
    Vue.use(CarouselItem);

    export default {
        data() {
            /* 验证输入是否数字 */
            var checkIsNumber = (rule, value, callback) => {
                if (value.length < 1){
                    callback();
                }else{
                    var numReg = /^([1-9][0-9]*)$/;
                    var numRe = new RegExp(numReg)
                    if (!numRe.test(value)){
                        callback(new Error('请输入整数'));
                    }else {
                        callback();
                    }
                }
            };
            return{
                /* --------------------------------------- 物料类别 -------------------------------------------- */
                typeData: [],           //类别数据tree
                typeAllDate: [],        //类别数据（添加全部作为最外层）
                defaultExpandedKeys: [0], //默认展开的节点
                /* --------------------------------------- 物料 -------------------------------------------- */
                materielData: [],  //物料数据
                tableHeight: window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 77,   //根据不同电脑计算table的高度
                totalMateriel: '',              //物料总数，类别、关键字有影响
                pageSizes: [20, 50, 100],       //每页条数选择数组
                pageSize: 20,                   //每页条数
                currentPage: 1,                 //当前页码
                currentType: 0,                 //当前物料类别
                sortColumn: 'create_time',      //排序字段，默认创建时间
                sortDirection: 'descending',    //排序方式，默认降序
                keywords: '',                   //物料搜索关键字
                fieldShow: {},                  //用于物料表单字段显示名
                tags: [],
                tableHeader: ['materiel_shelves','safe_inventory','avg_price','materiel_price','materiel_inventory'],                //不显示蓝色背景的表头字段
                selection: [],   //选中的物料
                outExcelUrl: '',  //导出物料的url地址
                materielInfo: '',
                stateOptions: [
                    {label:'启用',value:0,text:'启用'},
                    {label:'用完即止',value:1,text:'用完即止'},
                    {label:'禁用',value:2,text:'禁用'},
                    {label:'选型',value:3,text:'选型'},
                    {label:'报废',value:4,text:'报废'},
                ],
                filterValue: [],
                selectRow: [],
                relationMaterielSupplier: [],
                relationSupplierVisible: false,
                fieldList: [],
                /* --------------------------------------- 供应商 -------------------------------------------- */
                supplierVisible: false,
                /*supplierData: [],*/
                pageSizesNew: [20,50,100],
                pageSizeNew: 20,                   //每页条数
                totalNewSupplier: '',              //供应商总数
                currentPageNew: 1,                 //当前页码
                currentSupplierId: '',
                relationSupplier: {
                    id: '',
                },
                useSupplierList: [],
                relationSupplierRule: {
                    id: [
                        { required: true, message: '请选择供应商', trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            /* --------------------------------------- 物料字段 -------------------------------------------- */
            /* 获取物料字段信息 */
            getFieldList: function(){
                let data = {};
                data.url = this.$route.path;
                this.apiPost('/materiel/field/getList',data).then(res=>{
                    if (res.code == 200){
                        this.fieldList = res.field;
                        this.fieldShow = res.fieldShow;
                        this.searchField = res.searchField;
                    }else{
                        _g.toastMsg("error", res.message);
                    }
                });
            },
            /* --------------------------------------- 供应商 -------------------------------------------- */
            /* 启用物料供应商关联 */
            enableRelationUse:function(index,row){
                this.$confirm('是否确认启用关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.materiel = this.selection[0].id;
                    data.supplier = row.id;
                    this.apiPost('admin/materiel/enableRelation',data).then(res=>{
                        if (typeof res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        }else{
                            _g.toastMsg('success',res.message);
                            this.getRelationSupplier(this.selection[0].id);
                        }
                    });
                }).catch(()=>{});
            },
            /* 禁用物料供应商关联 */
            disableRelationUse:function(index,row){
                this.$confirm('是否确认禁用关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.materiel = this.selection[0].id;
                    data.supplier = row.id;
                    this.apiPost('admin/materiel/disableRelation',data).then(res=>{
                        if (typeof res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        }else{
                            _g.toastMsg('success',res.message);
                            this.getRelationSupplier(this.selection[0].id);
                        }
                    });
                }).catch(()=>{});
            },
            /* 取消关联 */
            cancelRelation:function(index,row){
                this.$confirm('是否确认取消关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.materiel = this.selection[0].id;
                    data.supplier = row.id;
                    this.apiPost('admin/materiel/cancelRelation',data).then(res=>{
                        if (typeof res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        }else{
                            _g.toastMsg('success',res.message);
                            this.getRelationSupplier(this.selection[0].id);
                        }
                    });
                }).catch(()=>{});
            },
            getRenderValueSupplier:function(row,field){
                if (field == 'address'){
                    let address = '';
                    if (row.country){
                        for (let k of countryList){
                            if (row.country == k.value){
                                address += k.label;
                            }
                        }
                    }else{
                        for (let i of ADDRLIST){
                            if (row.province == i.code){
                                address += i.name;
                                for (let j of i.child){
                                    if (Number(row.city) == j.code){
                                        if (i.name != j.name){
                                            address += j.name;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    address += row.address;
                    return address;
                }
                if (field == 'area'){
                    if (row.area == 1){
                        return '国内';
                    } else{
                        return '国外';
                    }
                }
                if (field == 'nature'){
                    switch (row.nature){
                        case 1: return '国企'; break;
                        case 2: return '外资'; break;
                        case 3: return '合资'; break;
                        case 4: return '私营'; break;
                        case 5: return '个人'; break;
                    }
                }
                if (field == 'company_state'){
                    if (row.company_state == 1){
                        return '存续';
                    }
                    return '注销';
                }
                if (field == 'default'){
                    if (row.default == 1){
                        return '启用';
                    }else{
                        return '停用';
                    }
                }
            },
            innerHeadRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;padding:0;';
            },
            getRenderSupplierValue:function(row,field){
                if (field == 'address'){
                    let address = '';
                    if (row.province){
                        for (let i of ADDRLIST){
                            if (row.province == i.code){
                                address += i.name;
                                for (let j of i.child){
                                    if (Number(row.city) == j.code){
                                        if (i.name != j.name){
                                            address += j.name;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    address += row.address;
                    return address;
                }
                if (field == 'area'){
                    if (row.area == 1){
                        return '国内';
                    } else{
                        return '国外';
                    }
                }
                if (field == 'nature'){
                    switch (row.nature){
                        case 1: return '国企'; break;
                        case 2: return '外资'; break;
                        case 3: return '合资'; break;
                        case 4: return '私营'; break;
                        case 5: return '个人'; break;
                    }
                }
                if (field == 'company_state'){
                    if (row.company_state == 1){
                        return '存续';
                    }
                    return '注销';
                }
                if (field == 'user_state'){
                    console.log(row);
                }
            },
            handleNewSizeChange:function(size){
                let tmpSize = this.pageSizeNew;
                if (tmpSize > this.totalNewSupplier && size > this.totalNewSupplier){
                    this.pageSizeNew = size;
                    return;
                }
                this.pageSizeNew = size;
                this.getParentSupplier(this.currentSupplierId);
            },
            handleNewCurrentChange:function(page){
                this.currentPageNew = page;
                this.getParentSupplier(this.currentSupplierId);
            },
            /* --------------------------------------- 物料 -------------------------------------------- */
            /* 点击查看关联时的事件 */
            handleShowSupplier:function(){
                if (this.selection.length < 1){
                    _g.toastMsg('error','请选择要查看供应商的物料');
                    return
                }
                if (this.selection.length > 1){
                    _g.toastMsg('error','不能同时查看多个物料的供应商');
                    return
                }
                let data = {};
                data.id = this.selection[0].id;
                this.apiPost('admin/materiel/getSupplier',data).then(res=>{
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code == 200) {
                        if (res.data.length > 0) {
                            this.relationMaterielSupplier = res.data;
                            this.relationSupplierVisible = true;
                        }else{
                            _g.toastMsg('error','该物料还未关联任何供应商');
                        }
                    }else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            /* 获取关联的供应商信息 */
            getRelationSupplier:function(id){
                let data = {};
                data.id = id;
                this.apiPost('admin/materiel/getSupplier',data).then(res=>{
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code == 200) {
                        this.relationMaterielSupplier = res.data;
                    }else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            /* 点击关联供应商的事件 */
            handleRelationSupplier:function(){
                let selection = this.selection;
                if (selection.length < 1){
                    _g.toastMsg('error','请选择要关联供应商的物料');
                    return;
                }
                this.supplierVisible = true;
            },
            /* 提交关联信息到后台 */
            submitRelationSupplier:function(){
                this.$confirm('是否确认进行关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('关联中');
                    let data = {};
                    let materiel = [];
                    for (let item of this.selection){
                        materiel.push(item.id);
                    }
                    data.supplier = this.relationSupplier.id;
                    data.materiel = materiel;
                    this.apiPost('admin/materiel/relation',data).then(res=>{
                        _g.showLoading().close();
                        if(typeof res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        }else{
                            _g.toastMsg('success',res.message);
                            for (let item of this.selection){
                                this.$refs['materielTable'].toggleRowSelection(item);
                            }
                            this.selection = [];
                            this.closeRelation();
                        }
                    });
                }).catch(()=>{});
            },
            closeRelation:function(){
                this.relationSupplier.id = '';
                this.supplierVisible = false;
            },
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;padding:3px 0;';
            },
            /* 修改每页条数事件 */
            handleSizeChange:function(size){
                let tmpSize = this.pageSize;
                if (tmpSize > this.totalMateriel && size > this.totalMateriel){
                    this.pageSize = size;
                    return;
                }
                this.pageSize = size;
                this.getMateriel();
            },
            /* 修改当前页码事件 */
            handleCurrentChange:function(page){
                this.currentPage = page;
                this.getMateriel();
            },
            /* 修改排序事件 */
            handleSortChange:function(column){
                if (column.prop){
                    this.sortColumn = column.prop;
                    this.sortDirection = column.order;
                }else{
                    this.sortColumn = 'create_time';
                    this.sortDirection = 'descending';
                }
                this.getMateriel();
            },
            /* 物料表选中事件 */
            selectionChange:function(selection){
                this.selection = selection;
            },
            rowClick:function(row, event, column){
                this.selection.forEach(item => {
                    // 排他,每次选择时把其他选项都清除
                    if (item.id !== row.id) {
                        this.$refs['materielTable'].toggleRowSelection(item);
                    }
                });
                this.$refs['materielTable'].toggleRowSelection(row);
            },
            /* 筛选状态事件 */
            filterStateHandler:function(value, row){
                let state = row.materiel_state;
                return state == value;
            },
            filterChange:function(filters){
                let state = [];
                for (let i = 0; i < filters.state.length; i++){
                    state.push(filters.state[i]);
                }
                this.filterValue = state;
                this.currentPage = 1;
                this.getMateriel();
            },
            /* 渲染表体内容 */
            getRenderValue:function(name,field){
                if (field == 'materiel_type_id'){
                    if (name.type){
                        return name.type.fullType;
                    }
                    return '';
                }
                if (field == 'materiel_inventory' || field == 'create_time'){
                    return name[field];
                }
                if (field == 'materiel_unit' && name[field]){
                    return name['materiel_unit_read'];
                }
                if (field == 'materiel_state'  && name[field] >= 0){
                    switch (name[field]){
                        case 0: return '启用';break;
                        case 1: return '用完即止';break;
                        case 2: return '禁用';break;
                        case 3: return '选型';break;
                        case 4: return '报废';break;
                    }
                }
                if (name[field]){
                    let val = name[field];
                    if (this.searchField.indexOf(field) >= 0){
                        if (val.indexOf(this.keywords) >= 0){
                            return val.replace(this.keywords,"<font color='red'>"+this.keywords+"</font>");
                        }else {
                            return val;
                        }
                    }else{
                        return val;
                    }
                }
            },
            /* 搜索物料 */
            searchMateriel:function(){
                let data = {};
                this.currentPage = 1;
                data.keywords = this.keywords;
                if (this.keywords){
                    let tag = {};
                    tag.name = this.keywords;
                    tag.type = '';
                    if (this.tags.length > 7){
                        this.tags.shift();
                    }
                    this.tags.push(tag);
                }
                this.getMateriel();
            },
            /* 搜索标签点击事件 */
            clickTag:function(tag){
                if (!tag.tag){
                    this.keywords = tag.name;
                    this.getMateriel();
                }
            },
            /* 重组图片数组，表体中显示 */
            getImages:function (images) {
                let imageArr = [];
                for (let i in images){
                    imageArr.push(images[i].image_url);
                }
                return imageArr;
            },
            /* 重组文件数组，表体中显示 */
            getFiles:function (files) {
                let fileArr = [];
                for (let i in files){
                    fileArr.push({name:files[i].old_name,url:files[i].file_url});
                }
                return fileArr;
            },
            /* 清除搜索关键字 */
            closeSearchTag:function(tag){
                this.tags.splice(this.tags.indexOf(tag), 1);
                if (tag.tag && tag.tag == 'materielType'){
                    this.currentType = 0;
                    this.getMateriel();
                }else if(tag.name == this.keywords){
                    this.keywords = '';
                    this.getMateriel();
                }
            },
            /* 计算导出物料的url */
            getOutExcelUrl:function(){
                let locationUrl = window.location.href;
                let path = this.$route.path;
                if (path.indexOf('/') == 0){
                    path = path.substr(1,path.length);
                }
                let menuPath = '';
                if (path.indexOf('/') > 0){
                    menuPath = path.split('/');
                    menuPath = menuPath.join('-');
                }else{
                    menuPath = path;
                }
                let url = '';
                if (locationUrl.indexOf('https') >= 0){
                    url ='https://';
                }else{
                    url ='http://';
                }
                url += window.location.host;
                //url += 'localhost';
                url += '/rdms/php/public/index.php/materiel/outToExcel/' + menuPath;
                this.outExcelUrl = url;
            },
            /* --------------------------------------- 物料类别 -------------------------------------------- */
            /* 单击类别事件 */
            nodeClick: function(data) {
                    let pId = [];
                    if (data.path.length > 1){
                        let path = data.path.substr(1,data.path.length-2);
                        let key = 0;
                        path = path.split('-');
                        for (let value of path) {
                            pId[key] = Number(value);
                            key++;
                        }

                    }
                    pId.push(data.id);
                this.currentPage = 1;
                this.currentType = data.id;
                this.getMateriel();
            },
            //获取物料类别
            getTypeList: function () {
                this.apiPost('/materiel/type/all','').then(res=>{
                    let typeAllDate = {};
                    typeAllDate.name = '全部';
                    typeAllDate.label = '全部';
                    typeAllDate.id = 0;
                    typeAllDate.value = 0;
                    typeAllDate.parent_id = 0;
                    typeAllDate.path = '-';
                    typeAllDate.children = res.data;
                    this.typeAllDate = [typeAllDate];
                    this.typeData = res.data;
                    this.typeNameList = res.list;
                });
            },
            //获取物料
            getMateriel: function () {
                let url = this.$route.path;
                let data = {'type':this.currentType,'pageSize':this.pageSize,'page':this.currentPage,'sortColumn':this.sortColumn,'sortDirection':this.sortDirection,'url':url};
                data.state = this.filterValue;
                if (this.keywords != '') {
                    data.keywords = this.keywords;
                }
                this.apiPost('/materiel/list',data).then(res=>{
                    this.materielData = res.data;
                    this.totalMateriel = res.count;
                });
            },
            getUseSupplier:function () {
                this.apiPost('admin/supplier/getUse','').then(res=>{
                    this.useSupplierList = res.data;
                });
            },
            routerToSuppliers:function(){
                this.$router.push('/materiel/suppliers');
            },
            /* 分隔线拖动事件 */
            moveSplitLine:function(){
                //const that = this
                var allBox = this.$refs.allBox.$el;
                var materielTypeBox = this.$refs.materielTypeBox.$el;
                var materielBox = this.$refs.materielBox.$el;
                var splitLine = this.$refs.splitLine.$el;
                var pageDiv = materielBox['children'][3];
                splitLine.onmousedown = function (e) {
                    var disX = (e || event).clientX;
                    splitLine.left = splitLine.offsetLeft;
                    document.onmousemove = function (e) {
                        var iT = splitLine.left + ((e || event).clientX - disX);

                        var e = e || window.event;
                        var maxT = allBox.clientWidth - splitLine.offsetWidth;  //clientWight
                        iT < 0 && (iT = 0);
                        iT > maxT && (iT = maxT);
                        splitLine.style.left = iT + "px";
                        if (((allBox.clientWidth >1300 && (allBox.clientWidth - iT) > 800) || allBox.clientWidth <= 1300) && iT >= 190){
                            materielTypeBox.style.width = Math.floor(iT/allBox.clientWidth*100) + "%";
                            materielBox.style.width = (100 - Math.floor(iT/allBox.clientWidth*100)) + "%";
                            pageDiv.style.width = (100 - Math.floor(iT/allBox.clientWidth*100) - 0.1) + "%";
                        }

                        return false;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        splitLine.releaseCapture && splitLine.releaseCapture();
                    };
                    splitLine.setCapture && splitLine.setCapture();
                    return false;
                };
            },
            /* 计算分割线的高度,物料表单弹框定位 */
            splitLineHeight:function () {
                var splitLine = this.$refs.splitLine.$el;
                var materielTypeBox = this.$refs.materielTypeBox.$el;
                var heightOne = window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 2;
                splitLine.style.height = heightOne + 'px';
                materielTypeBox.style.height = heightOne + 'px';
            },
            // 多选高亮选中行
            rowClass({row, rowIndex}){
                if(this.selectRow.includes(rowIndex)){
                    return { "background-color": "rgba(185, 221, 249, 0.75)" }
                }
            },
        },
        watch: {
            selection(data) {
                this.selectRow = [];
                if (data.length > 0) {
                    data.forEach((item, index) => {
                        this.selectRow.push(this.materielData.indexOf(item));
                    });
                }
            }
        },
        mounted: function () {
            this.getFieldList();
            this.getTypeList();
            this.getMateriel();
            this.splitLineHeight();
            this.moveSplitLine();
            this.getOutExcelUrl();
            this.getUseSupplier();
        },
        mixins: [http]
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    $color-blue: #2196F3;
    $space-width: 18px;
    .ms-tree-space {
        position: relative;
        top: 1px;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        width: $space-width;
        height: 14px;
        &::before {
            content: ""
        }
    }
    .processContainer{
        width: 100%;
        height: 100%;
    }
    table td {
        line-height: 26px;
    }

    .tree-ctrl{
        position: relative;
        cursor: pointer;
        color: $color-blue;
        margin-left: -$space-width;
    }
    .left-sider{
        height: 100%;
        overflow: hidden;
    }
    .right-content {
        height: 100%;
    }
    .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 20px;
    }
    .toggleShow{
        display: none;
        margin-left: 20px;
        padding-bottom: 7px;
    }
    .toggleShow button{
        width: 20px;
        height: 23px;
        margin-left: 0;
    }
    .toggleShow span svg{
        width: 7px;
        height: 7px;
    }
    .el-tree-node__content:hover .custom-tree-node > span.toggleShow{
        display: inline-block;
    }
    .operatBtnSmall{
        color: white;
        background-color: #f39c00;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
    }
    .operatBtn:hover{
        background-color: #f5b466;
    }
    .el-carousel__item img {
        opacity: 0.75;
        height: 150px;
        line-height: 150px;
        margin: 0;
    }
    .split-line{
        width: 2px;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        background-color: #E6EEF8;
        cursor:w-resize;
        float: left;
    }
    .pageWrapper{
        margin-left: 8px;
        width: 87.4%;
        height: 40px;
        position: fixed;
        right: 0;
        bottom: 0;
        background-color: #E6EEF8;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
    }
    .operation{
        border-left: 1px solid #d1d1d1;
    }
    .operatBtnBig{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        width: 44px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle:hover,.operatBtnBig:hover{
        background-color: #f5b466;
    }
    .materielClass{
        position: fixed;
        width: 800px;
        max-height: 80%;
        top: 50px;
        margin:0 auto;
        overflow: auto;
        background-color: white;
        box-shadow: 1px 1px 5px rgba(0,0,0,.2);
        border-radius: 10px;
        z-index: 2000;
        padding: 10px 15px 20px 15px;
    }
    .materielTitle{
        height: 24px;
        line-height: 24px;
        padding: 20px 30px 10px 30px;
        font-size: 18px;
        color: #303133;
        cursor: move;
    }
    .materielContent{
        padding: 30px 30px;
    }
    .materielFooter{
        padding: 10px 30px 30px 30px;
        text-align: right;
    }
    .materielButton{
        display: inline-block;
        height: 18px;
        line-height: 18px;
        width: 18px;
        padding: 2px 5px;
        cursor: pointer;
    }
    .searchTag{
        position: absolute;
        top: -40px;
        left: 260px;
    }
    .keywordsTag{
        cursor: pointer;
    }
</style>